<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "Message",
  data() {
    return {
      messageList: [
        {id: "001", title: "消息001"},
        {id: "002", title: "消息002"},
        {id: "003", title: "消息003"},
      ]
    }
  }
})
</script>

<template>
  <div>
    <ul>
      <!--传递query参数-->
      <!-- <router-link v-for="item in messageList" :key="item.id" :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link>-->
      <!--<router-link v-for="item in messageList" :key="item.id" :to="{path:'/home/message/detail',query:{id:item.id,title:item.title} }">{{item.title}}</router-link>-->

      <!--传递params参数-->
      <!--<router-link v-for="item in messageList" :key="item.id" :to="`/home/message/detail/${item.title}/${item.id}`">{{item.title}}</router-link>-->
      <router-link v-for="item in messageList" :key="item.id" :to="{name:'detail',params:{title:item.title,id:item.id}}">{{ item.title }}</router-link>

    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<style scoped lang="less">
li {
  width: 100%;
  background-color: #0189f6;
  margin: 5px 0;
  color: #fff;
}

a {
  text-decoration: none;
  margin: 0 10px;
  color: black;
}
</style>
